<template>
   
  <div>
    <el-carousel :interval="4000" type="card" height="150px">
      <el-carousel-item>
        <img src="./1.jpg" class="carousel_image_type">
      </el-carousel-item>
      <el-carousel-item>
        <img src="./1.jpg" class="carousel_image_type">
      </el-carousel-item>
      <el-carousel-item>
        <img src="./1.jpg" class="carousel_image_type">
      </el-carousel-item>
      <el-carousel-item>
        <img src="./1.jpg" class="carousel_image_type">
      </el-carousel-item>
    <el-carousel-item v-for="item in 0" :key="item">
      <h3 class="medium">{{ item }}</h3>
    </el-carousel-item>
   </el-carousel>
  <div class="right">
    <textarea class="textarea" placeholder="输入留言" maxlength="50" v-model="text"></textarea>
    <div class="outer">
      <div class="submit" @click="add()">发表</div>
      <div class = "contain">
       <div class="emm" v-for="(item,index) in list" :key="index">
         <div class="hhh">
           涛涛：
           {{index+1}}
           {{item}}
           <a class="delate" href="javascript:;" @click="delate(index)">删除</a>
         </div>
       </div>
      </div>
    </div>
  </div >
    <!-- 按钮 -->
    <div class="btns">
      <el-form size="small" inline style="text-align: center">
        <el-form-item label="标题"  >
          <el-input v-model="param.title"></el-input>
        </el-form-item>
         <el-form-item label="时间" >
          <el-input v-model="param.publishTime"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-search"
            @click="loadArticle"  >搜索</el-button
          >
        </el-form-item>
      </el-form>
      <div class="right-items" style="float: right;">
      <el-button size="small" type="primary" @click="toAddHandler">新增</el-button>
      <el-button size="small" type="primary" @click="toAdd">amazing</el-button>
      <!-- <input type="button" value="amazing" onclick="window.location='http://127.0.0.1:5000/';"/> -->
      </div>
    </div>
    <!-- /按钮 -->
    <!-- 表格 -->
  <div class="table">
    <el-table size="small" :data="Article.filter(data => !param.title || data.title.toLowerCase().includes(param.title.toLowerCase()))">
      <el-table-column type="index" :index="1" label="序号"></el-table-column>
      <el-table-column label="标题" prop="title" align="center"></el-table-column>
      <el-table-column label="biref" prop="biref" align="center"></el-table-column>
      <el-table-column label="内容" prop="content" align="center" width="270" show-overflow-tooltip></el-table-column>
      <el-table-column label="publishTime" prop="publishTime" align="center" :formatter="dateFormat"></el-table-column>
      <el-table-column label="readTimes" prop="readTimes" align="center"></el-table-column>
      <el-table-column label="状态" prop="status" align="center"></el-table-column>
      <el-table-column label="thumpUp" prop="thumpUp" align="center"></el-table-column>
      <el-table-column label="parentId" prop="parentId" align="center"></el-table-column>
      <el-table-column label="cover" prop="cover" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column label="authorId" prop="authorId" align="center"></el-table-column>
      <el-table-column label="categoryId" prop="categoryId" align="center"></el-table-column>

      <el-table-column label="操作" width="200" align="center">
  
        <!-- 定制-插槽 -->
        <template slot-scope="scope">
          <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="deleteHandler(scope.row)">
            <el-button type="danger" round slot="reference" size="mini" >删除</el-button>
          </el-popconfirm>
          <el-button type="primary" round size="mini" @click="updateHandler(scope.row)">修改</el-button>
        </template>   
      </el-table-column>
    </el-table>
  </div>
  
    <!-- /表格 -->
    <!-- 模态框 -->

    <!-- /模态框 -->

  
 
 </div>
</template>

<script>
import { del, get } from "@/utils/request";
import moment from "moment";
export default {
  data() {
    return {
      
      // 参数，用于保存检索的参数
      param: {},
      // 组件模板中需要的数据
      Article: [],
      list:[],
      text:""
    };
  },
  // 方法或者js的事件处理函数
  methods: {
    toAdd(){
      window.open("http://127.0.0.1:5000/")
    },
     dateFormat: function (row, column) {
      var date = row[column.property];

      if (date == undefined) {
        return "";
      }

      return moment(date).format("YYYY-MM-DD");
      // return moment(date).format("HH:mm:ss")
    },
    add(){
      this.list.push(this.text);
      this.text = '';
    },
    delate(index){
      this.list.splice(index,1)
    },

    updateHandler(row){
       this.$router.push({
           path:"/BaseFile/article_create",
           query:row
       }) 

    },
    // 删除事件处理函数
    deleteHandler(row) {
    
        let url = "http://121.196.106.124:8888/Article/deleteById";
        del(url, { id: row.id }).then((resp) => {
          this.$message({ type: "success", message: resp.message });
          this.loadArticle();
        });
     
    },
    //  deleteHandler(row) {
    //   this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   }).then(() => {
    //     let url = "http://121.196.106.124:8888/Article/deleteById";
    //     del(url, { id: row.id }).then((resp) => {
    //       this.$message({ type: "success", message: resp.message });
    //       this.loadArticle();
    //     });
    //   });
    // },
    // 跳转
    toAddHandler() {
      this.$router.push("/BaseFile/article_create");
    },
    // 查询后台中的应用信息
    loadArticle() {
      let url = "http://121.196.106.124:8888/Article/query";
      get(url, this.param).then((resp) => {
         this.Article = resp.data;
      });
    },
  },
  // 页面加载的时候会执行的方法
  created() {
    this.loadArticle();
  },
};
</script>
<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  .table{
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
.btns {
  margin-bottom: 0.5em;
}
.carousel_image_type{
     width: 100%;
  }
</style>
       